<script setup lang="ts">
import { computed, ref, watch } from 'vue';

import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

import CashierSettlementModal from './components/CashierSettlementModal.vue';
import CreditModal from './components/CreditModal.vue';
import DepositModal from './components/DepositModal.vue';
import ServiceCardModal from './components/ServiceCardModal.vue';

// 接口定义
interface BillItem {
  id: string;
  name: string;
  specification: string;
  unit: string;
  quantity: number;
  unitPrice: number;
  discountedPrice: number;
  total: number;
  salesPerson: string;
  servicePerson: string;
  category: string;
  date: string;
}

interface Bill {
  id: string;
  petName: string;
  petId: string;
  ownerName: string;
  ownerPhone: string;
  createTime: string;
  status: 'onAccount' | 'refund' | 'settled' | 'unsettled';
  totalAmount: number;
  items: BillItem[];
}

// 响应式数据
const dateRange = ref<[dayjs.Dayjs, dayjs.Dayjs]>([
  dayjs('2019-08-01'),
  dayjs('2019-08-31'),
]);
const detailDateRange = ref<[dayjs.Dayjs, dayjs.Dayjs]>([
  dayjs().subtract(7, 'day'),
  dayjs(),
]);
const searchKeyword = ref('');
const activeTab = ref('all');
const selectedBill = ref<Bill | null>(null);
const collapsedGroups = ref<string[]>([]);

// 模态框控制
const showDepositModal = ref(false);
const showCreditModal = ref(false);
const showServiceCardModal = ref(false);
const showCashierSettlementModal = ref(false);

// 模拟账单数据
const bills = ref<Bill[]>([
  {
    id: '1',
    petName: '兜兜',
    petId: 'P000001',
    ownerName: '王先生',
    ownerPhone: '138****1234',
    createTime: '2019-08-07 17:04:21',
    status: 'unsettled',
    totalAmount: 20,
    items: [
      {
        id: '1',
        name: '微信挂号',
        specification: '',
        unit: '次',
        quantity: 1,
        unitPrice: 20,
        discountedPrice: 20,
        total: 20,
        salesPerson: '孙医生',
        servicePerson: '孙医生',
        category: 'registration',
        date: '2019-08-07',
      },
    ],
  },
  {
    id: '2',
    petName: '球球',
    petId: 'P000002',
    ownerName: '李女士',
    ownerPhone: '139****5678',
    createTime: '2019-08-08 10:30:15',
    status: 'unsettled',
    totalAmount: 0,
    items: [
      {
        id: '2',
        name: 'a干扰素',
        specification: '10ml',
        unit: '支',
        quantity: 1,
        unitPrice: 0,
        discountedPrice: 0,
        total: 0,
        salesPerson: '孙医生',
        servicePerson: '孙医生',
        category: 'prescription',
        date: '2019-08-08',
      },
      {
        id: '3',
        name: '宠儿香关节宝',
        specification: '30粒',
        unit: '盒',
        quantity: 1,
        unitPrice: 0,
        discountedPrice: 0,
        total: 0,
        salesPerson: '孙医生',
        servicePerson: '孙医生',
        category: 'prescription',
        date: '2019-08-08',
      },
      {
        id: '4',
        name: '达美健',
        specification: '100g',
        unit: '瓶',
        quantity: 1,
        unitPrice: 0,
        discountedPrice: 0,
        total: 0,
        salesPerson: '孙医生',
        servicePerson: '孙医生',
        category: 'prescription',
        date: '2019-08-08',
      },
    ],
  },
  {
    id: '3',
    petName: '小白',
    petId: 'P000003',
    ownerName: '张女士',
    ownerPhone: '137****9999',
    createTime: '2019-08-09 14:20:30',
    status: 'onAccount',
    totalAmount: 350,
    items: [
      {
        id: '5',
        name: '长毛犬美容',
        specification: '8-12kg',
        unit: '次',
        quantity: 1,
        unitPrice: 200,
        discountedPrice: 200,
        total: 200,
        salesPerson: '李美容师',
        servicePerson: '李美容师',
        category: 'grooming',
        date: '2019-08-09',
      },
      {
        id: '6',
        name: '宠物洗发水',
        specification: '500ml',
        unit: '瓶',
        quantity: 1,
        unitPrice: 80,
        discountedPrice: 80,
        total: 80,
        salesPerson: '李美容师',
        servicePerson: '李美容师',
        category: 'grooming',
        date: '2019-08-09',
      },
      {
        id: '7',
        name: '宠物护发素',
        specification: '300ml',
        unit: '瓶',
        quantity: 1,
        unitPrice: 70,
        discountedPrice: 70,
        total: 70,
        salesPerson: '李美容师',
        servicePerson: '李美容师',
        category: 'grooming',
        date: '2019-08-09',
      },
    ],
  },
  {
    id: '4',
    petName: '咪咪',
    petId: 'P000004',
    ownerName: '陈先生',
    ownerPhone: '136****8888',
    createTime: '2019-08-10 09:15:45',
    status: 'settled',
    totalAmount: 180,
    items: [
      {
        id: '8',
        name: '狂犬疫苗',
        specification: '1ml',
        unit: '支',
        quantity: 1,
        unitPrice: 120,
        discountedPrice: 120,
        total: 120,
        salesPerson: '王医生',
        servicePerson: '王医生',
        category: 'vaccine',
        date: '2019-08-10',
      },
      {
        id: '9',
        name: '驱虫药',
        specification: '3片装',
        unit: '盒',
        quantity: 1,
        unitPrice: 60,
        discountedPrice: 60,
        total: 60,
        salesPerson: '王医生',
        servicePerson: '王医生',
        category: 'vaccine',
        date: '2019-08-10',
      },
    ],
  },
  {
    id: '5',
    petName: '旺财',
    petId: 'P000005',
    ownerName: '刘女士',
    ownerPhone: '135****7777',
    createTime: '2019-08-11 16:30:20',
    status: 'settled',
    totalAmount: 450,
    items: [
      {
        id: '10',
        name: '寄养服务',
        specification: '3天',
        unit: '天',
        quantity: 3,
        unitPrice: 100,
        discountedPrice: 100,
        total: 300,
        salesPerson: '赵前台',
        servicePerson: '赵前台',
        category: 'foster',
        date: '2019-08-11',
      },
      {
        id: '11',
        name: '宠物粮',
        specification: '2kg',
        unit: '袋',
        quantity: 1,
        unitPrice: 80,
        discountedPrice: 80,
        total: 80,
        salesPerson: '赵前台',
        servicePerson: '赵前台',
        category: 'foster',
        date: '2019-08-11',
      },
      {
        id: '12',
        name: '清洁费',
        specification: '',
        unit: '次',
        quantity: 1,
        unitPrice: 70,
        discountedPrice: 70,
        total: 70,
        salesPerson: '赵前台',
        servicePerson: '赵前台',
        category: 'foster',
        date: '2019-08-11',
      },
    ],
  },
  {
    id: '6',
    petName: '豆豆',
    petId: 'P000006',
    ownerName: '黄先生',
    ownerPhone: '134****6666',
    createTime: '2019-08-12 11:45:10',
    status: 'refund',
    totalAmount: 120,
    items: [
      {
        id: '13',
        name: '血常规检查',
        specification: '',
        unit: '次',
        quantity: 1,
        unitPrice: 80,
        discountedPrice: 80,
        total: 80,
        salesPerson: '孙医生',
        servicePerson: '孙医生',
        category: 'laboratory',
        date: '2019-08-12',
      },
      {
        id: '14',
        name: '生化检查',
        specification: '',
        unit: '次',
        quantity: 1,
        unitPrice: 40,
        discountedPrice: 40,
        total: 40,
        salesPerson: '孙医生',
        servicePerson: '孙医生',
        category: 'laboratory',
        date: '2019-08-12',
      },
    ],
  },
  {
    id: '7',
    petName: '乐乐',
    petId: 'P000007',
    ownerName: '周女士',
    ownerPhone: '133****5555',
    createTime: '2019-08-13 13:20:35',
    status: 'unsettled',
    totalAmount: 280,
    items: [
      {
        id: '15',
        name: 'X光检查',
        specification: '胸部',
        unit: '次',
        quantity: 1,
        unitPrice: 150,
        discountedPrice: 150,
        total: 150,
        salesPerson: '李医生',
        servicePerson: '李医生',
        category: 'imaging',
        date: '2019-08-13',
      },
      {
        id: '16',
        name: 'B超检查',
        specification: '腹部',
        unit: '次',
        quantity: 1,
        unitPrice: 130,
        discountedPrice: 130,
        total: 130,
        salesPerson: '李医生',
        servicePerson: '李医生',
        category: 'imaging',
        date: '2019-08-13',
      },
    ],
  },
  {
    id: '8',
    petName: '多多',
    petId: 'P000008',
    ownerName: '吴先生',
    ownerPhone: '132****4444',
    createTime: '2019-08-14 10:10:25',
    status: 'unsettled',
    totalAmount: 320,
    items: [
      {
        id: '17',
        name: '路斯牛肉粒',
        specification: '500g',
        unit: '袋',
        quantity: 2,
        unitPrice: 50,
        discountedPrice: 50,
        total: 100,
        salesPerson: '曾前台',
        servicePerson: '曾前台',
        category: 'sales',
        date: '2019-08-14',
      },
      {
        id: '18',
        name: '皇家狗粮',
        specification: '2kg',
        unit: '袋',
        quantity: 1,
        unitPrice: 120,
        discountedPrice: 120,
        total: 120,
        salesPerson: '曾前台',
        servicePerson: '曾前台',
        category: 'sales',
        date: '2019-08-14',
      },
      {
        id: '19',
        name: '宠物玩具球',
        specification: '直径8cm',
        unit: '个',
        quantity: 1,
        unitPrice: 25,
        discountedPrice: 25,
        total: 25,
        salesPerson: '曾前台',
        servicePerson: '曾前台',
        category: 'sales',
        date: '2019-08-14',
      },
      {
        id: '20',
        name: '宠物维生素',
        specification: '60片',
        unit: '瓶',
        quantity: 1,
        unitPrice: 75,
        discountedPrice: 75,
        total: 75,
        salesPerson: '曾前台',
        servicePerson: '曾前台',
        category: 'sales',
        date: '2019-08-14',
      },
    ],
  },
]);

// 表格列定义
const detailColumns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '规格',
    dataIndex: 'specification',
    key: 'specification',
  },
  {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit',
  },
  {
    title: '数量',
    dataIndex: 'quantity',
    key: 'quantity',
  },
  {
    title: '单价',
    dataIndex: 'unitPrice',
    key: 'unitPrice',
  },
  {
    title: '折后单价',
    dataIndex: 'discountedPrice',
    key: 'discountedPrice',
  },
  {
    title: '合计',
    dataIndex: 'total',
    key: 'total',
  },
  {
    title: '销售人员',
    dataIndex: 'salesPerson',
    key: 'salesPerson',
  },
  {
    title: '服务人员',
    dataIndex: 'servicePerson',
    key: 'servicePerson',
  },
];

// 计算属性
const filteredBills = computed(() => {
  let filtered = bills.value;

  // 按状态筛选
  if (activeTab.value !== 'all') {
    filtered = filtered.filter((bill) => bill.status === activeTab.value);
  }

  // 按日期筛选
  if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
    filtered = filtered.filter((bill) => {
      const billDate = dayjs(bill.createTime);
      return (
        billDate.isAfter(dateRange.value[0].subtract(1, 'day')) &&
        billDate.isBefore(dateRange.value[1].add(1, 'day'))
      );
    });
  }

  // 按关键词搜索
  if (searchKeyword.value) {
    filtered = filtered.filter(
      (bill) =>
        bill.petName.includes(searchKeyword.value) ||
        bill.ownerName.includes(searchKeyword.value) ||
        bill.ownerPhone.includes(searchKeyword.value) ||
        bill.petId.includes(searchKeyword.value),
    );
  }

  return filtered;
});

const groupedBillItems = computed(() => {
  if (!selectedBill.value) return {};

  const grouped: Record<string, Record<string, BillItem[]>> = {};

  selectedBill.value.items.forEach((item) => {
    if (!grouped[item.date]) {
      grouped[item.date] = {};
    }
    if (!grouped[item.date][item.category]) {
      grouped[item.date][item.category] = [];
    }
    grouped[item.date][item.category].push(item);
  });

  return grouped;
});

// 方法
const handleDateChange = () => {
  // 日期筛选逻辑已在计算属性中处理
};

const handleDetailDateChange = () => {
  // 明细日期筛选逻辑
};

const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
};

const handleTabChange = (key: string) => {
  activeTab.value = key;
};

const selectBill = (bill: Bill) => {
  selectedBill.value = bill;
  message.success(`已选择账单: ${bill.petName}`);
};

const toggleDisplayMode = () => {
  message.info('切换显示模式功能开发中...');
};

const toggleGroupCollapse = (date: string) => {
  const index = collapsedGroups.value.indexOf(date);
  if (index === -1) {
    collapsedGroups.value.push(date);
  } else {
    collapsedGroups.value.splice(index, 1);
  }
};

const formatDate = (dateStr: string) => {
  const date = dayjs(dateStr);
  const weekdays = [
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
  ];
  return `${date.format('YYYY年MM月DD日')} (${weekdays[date.day()]})`;
};

const getCategoryName = (category: string) => {
  const categoryMap: Record<string, string> = {
    registration: '挂号',
    prescription: '普通门诊处方',
    grooming: '美容服务',
    vaccine: '疫苗服务',
    foster: '寄养服务',
    sales: '商品销售',
  };
  return categoryMap[category] || category;
};

const getCategoryTotal = (items: BillItem[]) => {
  return items.reduce((sum, item) => sum + item.total, 0);
};

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    unsettled: 'red',
    onAccount: 'orange',
    settled: 'green',
    refund: 'blue',
  };
  return colorMap[status] || 'default';
};

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    unsettled: '未结',
    onAccount: '挂账',
    settled: '已结',
    refund: '退款',
  };
  return textMap[status] || status;
};

const printBill = () => {
  if (!selectedBill.value) {
    message.warning('请先选择账单');
    return;
  }
  message.success('打印功能已触发');
};

const openDepositModal = () => {
  if (!selectedBill.value) {
    message.warning('请先选择账单');
    return;
  }
  showDepositModal.value = true;
};

const openCreditModal = () => {
  if (!selectedBill.value) {
    message.warning('请先选择账单');
    return;
  }
  showCreditModal.value = true;
};

const openServiceCardModal = () => {
  if (!selectedBill.value) {
    message.warning('请先选择账单');
    return;
  }
  showServiceCardModal.value = true;
};

const openSettlementModal = () => {
  if (!selectedBill.value) {
    message.warning('请先选择账单');
    return;
  }
  showCashierSettlementModal.value = true;
};

const handleDepositSuccess = () => {
  message.success('押金操作成功');
  showDepositModal.value = false;
};

const handleCreditSuccess = () => {
  message.success('挂账成功');
  showCreditModal.value = false;
  // 更新账单状态
  if (selectedBill.value) {
    selectedBill.value.status = 'onAccount';
  }
};

const handleServiceCardSuccess = () => {
  message.success('次卡结算成功');
  showServiceCardModal.value = false;
  // 更新账单状态
  if (selectedBill.value) {
    selectedBill.value.status = 'settled';
  }
};

const handleCashierSettlementSuccess = () => {
  message.success('收银结算成功');
  showCashierSettlementModal.value = false;
  // 更新账单状态
  if (selectedBill.value) {
    selectedBill.value.status = 'settled';
  }
};

// 监听选中账单变化
watch(selectedBill, (newBill) => {
  if (newBill) {
    // 重置折叠状态
    collapsedGroups.value = [];
  }
});

// 页面初始化时自动选择第一个账单
watch(
  filteredBills,
  (newBills) => {
    if (newBills.length > 0 && !selectedBill.value) {
      selectedBill.value = newBills[0];
    }
  },
  { immediate: true },
);
</script>

<template>
  <div class="settlement-management">
    <!-- 左侧：账单列表 -->
    <div class="left-panel">
      <div class="panel-header">
        <h3>宠物账单</h3>
      </div>

      <!-- 筛选条件 -->
      <div class="filter-section">
        <!-- 时间筛选 -->
        <div class="date-filter">
          <a-range-picker
            v-model:value="dateRange"
            format="YYYY.MM.DD"
            @change="handleDateChange"
            style="width: 100%"
          />
        </div>

        <!-- 搜索框 -->
        <div class="search-filter">
          <a-input-search
            v-model:value="searchKeyword"
            placeholder="宠物/主人/电话/单号"
            @search="handleSearch"
            style="width: 100%"
          />
        </div>
      </div>

      <!-- 账单分类标签 -->
      <div class="bill-tabs">
        <a-tabs v-model:active-key="activeTab" @change="handleTabChange">
          <a-tab-pane key="all" tab="全部" />
          <a-tab-pane key="unsettled" tab="未结" />
          <a-tab-pane key="onAccount" tab="挂账" />
          <a-tab-pane key="settled" tab="已结" />
          <a-tab-pane key="refund" tab="退款" />
        </a-tabs>
      </div>

      <!-- 账单列表 -->
      <div class="bill-list">
        <div
          v-for="bill in filteredBills"
          :key="bill.id"
          class="bill-item"
          :class="{ active: selectedBill?.id === bill.id }"
          @click="selectBill(bill)"
        >
          <div class="bill-header">
            <div class="pet-info">
              <span class="pet-name">{{ bill.petName }}</span>
              <span class="pet-id">({{ bill.petId }})</span>
            </div>
            <div class="owner-info">
              <span class="owner-name">{{ bill.ownerName }}</span>
            </div>
          </div>
          <div class="bill-details">
            <div class="bill-time">{{ bill.createTime }}</div>
            <div class="bill-status">
              <a-tag :color="getStatusColor(bill.status)">
                {{ getStatusText(bill.status) }}
              </a-tag>
            </div>
            <div class="bill-amount">¥{{ bill.totalAmount.toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <!-- 切换显示方式 -->
      <div class="display-toggle">
        <a-button type="link" @click="toggleDisplayMode">
          切换按顾客显示
        </a-button>
      </div>
    </div>

    <!-- 右侧：账单明细 -->
    <div class="right-panel">
      <div v-if="selectedBill" class="bill-details-panel">
        <div class="details-header">
          <h3>账单明细-{{ getStatusText(selectedBill.status) }}</h3>
          <div class="time-filter">
            <a-range-picker
              v-model:value="detailDateRange"
              format="YYYY.MM.DD"
              @change="handleDetailDateChange"
            />
          </div>
        </div>

        <!-- 账单明细按日期分组 -->
        <div class="bill-details-content">
          <div
            v-for="(group, date) in groupedBillItems"
            :key="date"
            class="date-group"
          >
            <div class="date-header">
              <h4>{{ formatDate(date) }}</h4>
              <a-button type="link" @click="toggleGroupCollapse(date)">
                {{ collapsedGroups.includes(date) ? '展开' : '收起' }}
              </a-button>
            </div>

            <div v-if="!collapsedGroups.includes(date)" class="date-content">
              <div
                v-for="(items, category) in group"
                :key="category"
                class="category-section"
              >
                <h5>{{ getCategoryName(category) }}</h5>
                <a-table
                  :columns="detailColumns"
                  :data-source="items"
                  :pagination="false"
                  size="small"
                >
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'unitPrice'">
                      ¥{{ record.unitPrice.toFixed(2) }}
                    </template>
                    <template v-else-if="column.key === 'discountedPrice'">
                      ¥{{ record.discountedPrice.toFixed(2) }}
                    </template>
                    <template v-else-if="column.key === 'total'">
                      ¥{{ record.total.toFixed(2) }}
                    </template>
                  </template>
                </a-table>
                <div class="category-total">
                  合计: ¥{{ getCategoryTotal(items).toFixed(2) }}元
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-bar">
          <div class="total-info">
            <span class="total-label">合计:</span>
            <span class="total-amount"
              >¥{{ selectedBill.totalAmount.toFixed(2) }}元</span
            >
          </div>
          <div class="action-buttons">
            <a-button type="default" @click="openDepositModal"> 押金 </a-button>
            <a-button type="default" @click="printBill"> 打印 </a-button>
            <a-button type="default" @click="openCreditModal"> 挂账 </a-button>
            <a-button type="default" @click="openServiceCardModal">
              次卡结算
            </a-button>
            <a-button type="primary" @click="openSettlementModal">
              收银结算
            </a-button>
          </div>
        </div>
      </div>

      <div v-else class="empty-state">
        <div class="empty-icon">📋</div>
        <div class="empty-text">请选择账单查看明细</div>
      </div>
    </div>

    <!-- 押金模态框 -->
    <DepositModal
      :visible="showDepositModal"
      :bill="selectedBill"
      @update:visible="showDepositModal = $event"
      @success="handleDepositSuccess"
    />

    <!-- 挂账模态框 -->
    <CreditModal
      :visible="showCreditModal"
      :bill="selectedBill"
      @update:visible="showCreditModal = $event"
      @success="handleCreditSuccess"
    />

    <!-- 次卡结算模态框 -->
    <ServiceCardModal
      :visible="showServiceCardModal"
      :bill="selectedBill"
      @update:visible="showServiceCardModal = $event"
      @success="handleServiceCardSuccess"
    />

    <!-- 收银结算模态框 -->
    <CashierSettlementModal
      :visible="showCashierSettlementModal"
      :bill="selectedBill"
      @update:visible="showCashierSettlementModal = $event"
      @success="handleCashierSettlementSuccess"
    />
  </div>
</template>

<style scoped>
.settlement-management {
  display: flex;
  height: 100%;
  background: #f5f5f5;
}

.left-panel {
  display: flex;
  flex-direction: column;
  width: 400px;
  background: white;
  border-right: 1px solid #e8e8e8;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.filter-section {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.date-filter {
  margin-bottom: 12px;
}

.search-filter {
  margin-bottom: 12px;
}

.bill-tabs {
  padding: 0 16px;
}

.bill-list {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.bill-item {
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  transition: all 0.3s;
}

.bill-item:hover {
  background: #f0f8ff;
  border-color: #1890ff;
}

.bill-item.active {
  background: #e6f7ff;
  border-color: #1890ff;
}

.bill-header {
  margin-bottom: 8px;
}

.pet-info {
  margin-bottom: 4px;
}

.pet-name {
  font-weight: bold;
  color: #333;
}

.pet-id {
  font-size: 12px;
  color: #666;
}

.owner-name {
  font-size: 14px;
  color: #666;
}

.bill-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bill-time {
  font-size: 12px;
  color: #999;
}

.bill-amount {
  font-weight: bold;
  color: #ff4d4f;
}

.display-toggle {
  padding: 16px;
  text-align: center;
  border-top: 1px solid #e8e8e8;
}

.right-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: white;
}

.bill-details-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
}

.details-header h3 {
  margin: 0;
  color: #333;
}

.bill-details-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.date-group {
  margin-bottom: 24px;
}

.date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.date-header h4 {
  margin: 0;
  color: #333;
}

.category-section {
  margin-bottom: 16px;
}

.category-section h5 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}

.category-total {
  padding: 8px 0;
  font-weight: bold;
  color: #ff4d4f;
  text-align: right;
}

.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e8e8e8;
}

.total-info {
  display: flex;
  gap: 8px;
  align-items: center;
}

.total-label {
  font-size: 16px;
  color: #333;
}

.total-amount {
  font-size: 20px;
  font-weight: bold;
  color: #ff4d4f;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.empty-icon {
  margin-bottom: 16px;
  font-size: 48px;
}

.empty-text {
  font-size: 14px;
}
</style>
